<template>
  <f-table
    ref="tableRef"
    @register="register">
    <template #header-left>
      <el-button @click="handleExport">{{ t("export") }}</el-button>
    </template>
    <template #username="{ row }">
      <div
        class="flex items-center cursor-pointer"
        @click="handleDetail(row)">
        <el-avatar :src="row.avatar"></el-avatar>
        <div class="overflow-hidden ml-[5px] nickname">{{ row.nickname }}</div>
        <el-icon class="ml-[5px]" @click.stop="copyEvent(row.nickname)"><CopyDocument /></el-icon>
      </div>
    </template>

    <template #action="{ row }">
      <el-button
        type="primary"
        link
        @click="handleDetail(row)"
        >详情</el-button
      >
    </template>
  </f-table>
  <f-detail-drawer
    ref="detailDrawerRef"
    is="UserDetail"></f-detail-drawer>
</template>
<script lang="ts" setup>
import { nextTick, onMounted, ref, watch } from "vue";
import { t } from "@/lang";
import FTable, {
  BasicColumn,
  useTable,
} from "@/addon/htscrm/components/f-table";
import {
  tableColumns,
  tableSearchFormItems,
} from "@/addon/htscrm/data/activity.video.user-list";
import {
  exportDataApi,
  getAnalysisDataApi,
  getLevelListApi,
  getStoreAllApi,
} from "@/addon/htscrm/api";
import FDetailDrawer from "@/addon/htscrm/components/f-detail-drawer";
import { ElMessage, ElMessageBox } from "element-plus";
import { useClipboard } from "@vueuse/core";
import { useRouter } from "vue-router";


const router = useRouter();

const prop = defineProps({
  searchForm: {
    type: Object,
    default: () => ({}),
  },
});

interface IOpt {
  search_key: {
    value: string;
    select: string;
  };
  reg_time: number[];
  [key: string]: any;
}

const detailDrawerRef = ref();
const tableRef = ref();
const { methods, register } = useTable({
  rowKey: "id",
  searchFromItems: tableSearchFormItems(t),
  columns: tableColumns(t) as BasicColumn<any>[],
  beforeFetch: (opt: IOpt) => {
    if (opt.reg_time && opt.reg_time.length) {
      opt.reg_time = [
        parseInt(opt.reg_time[0] / 1000 + ""),
        parseInt(opt.reg_time[1] / 1000 + ""),
      ];
    }

    return {
      ...opt,
      search_key: opt.search_key.value,
      search_type: opt.search_key.select,
      cate_id: prop.searchForm.cate_id || "",
    };
  },
  api: async (opt) => (await getAnalysisDataApi(opt)).data,
});

/**
 * @description 导出
 */
async function handleExport() {
  let params = methods.getSearchInfo()
  const res = await exportDataApi("cateAnalysis", {
    ...params,
    search_key: params.search_key.value,
    search_type: params.search_key.select,
    cate_id: prop.searchForm.cate_id || "",
  });
  if (res.data) {
    const action = await ElMessageBox.confirm(
      "文件导出已添加到下载中心，是否立即前往下载中心",
      t("alert.title"),
      {
        cancelButtonText: "我再看看",
        confirmButtonText: "立即前往",
      }
    );
    console.log(action);

    if (action === "confirm") {
      router.push("/htscrm/system/download");
    }
  }
}

const searchFromItems = tableSearchFormItems(t);
async function getStoreList() {
  const res = await getStoreAllApi();

  searchFromItems[3].childrenComponent.children = res.data.map((item) => {
    return {
      label: item.title,
      value: item.id,
    };
  });
}
async function getLevelList() {
  const res = await getLevelListApi();

  searchFromItems[13].childrenComponent.children = res.data.map((item) => {
    return {
      label: item.name,
      value: item.id,
    };
  });
}

function handleDetail(row: any) {
  detailDrawerRef.value?.show("客户详情", row);
}

onMounted(() => {
  nextTick(async () => {
    await getStoreList();
    await getLevelList();

    methods.setFormItems(searchFromItems);
  });
});

function reload() {
  methods.reload();
}

// 复制
const { copy, isSupported, copied } = useClipboard();
const copyEvent = (text: string) => {
  if (!isSupported.value) {
    // ElMessage({
    //     message: t('notSupportCopy'),
    //     type: 'warning'
    // })
  }
  copy(text);
};

watch(copied, () => {
  if (copied.value) {
    ElMessage({
      message: t("copySuccess"),
      type: "success",
    });
  }
});

defineExpose({
  reload,
});
</script>

<style lang="scss" scoped>
:deep(.f-search) {
  background-color: var(--el-bg-color-page);
}
.el-avatar {
  width: 40px;
  height: 40px;
}
.nickname {
  max-width: 85px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
